/*
 * @Author: your name
 * @Date: 2020-05-25 22:34:40
 * @LastEditTime: 2020-05-26 14:33:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \InformationVisualization-COVID19\static\echarts\pie.js
 */
function pie() {
    var mycharts = echarts.init(document.getElementById('pie'), 'macarons2');
    option = {
        title: {
            text: '疫情概览',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            x: 'center',
            y: 'bottom',
            data: ['累计确诊', '累计治愈', '累计死亡']
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: false,
        series: [
            {
                name: 'pie',
                type: 'pie',
                radius: [0, 120],
                // avoidLabelOverlap: false,
                startAngle: 90,
                data: [
                    { value: 84543, name: '累计确诊' },
                    { value: 79767, name: '累计治愈' },
                    { value: 4645, name: '累计死亡' },
                ]
            }
        ]
    };
    //设置动态angle clearInterval(timeTicket);

    var timeTicket;
    function rotate() {
        timeTicket = setInterval(() => {
            var data0 = option.series[0].data;
            var temp = data0[0];
            data0.shift(); //刷新页面，去旧纳新
            data0.push(temp)
            mycharts.setOption(option);
        }, 2000);
    }
    function stopRotate() {
        clearInterval(timeTicket);
    }
    rotate();
    
    //document.getElementById('pie').onmouseover = stopRotate;
    //document.getElementById('pie').onmouseout = rotate;

    //移除事件监听
    //document.getElementById("pie").removeEventListener("onmouseover");
    mycharts.on('mouseover', {seriesName: 'pie'},()=>{
        stopRotate();
    }  // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
    );
    mycharts.on('mouseout', {seriesName: 'pie'},()=>{
        rotate();
    }  // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
    );
}
